<template>
  <div class="info-wrap">
    <Title title="成本信息" style="font-size:16px; margin:10px 0 16px 0"/>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="costRules"
      :label-width="labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <levelTitle v-if="isWeiBo" :element="{name: '成本价格', options: {titleLevel: 2}}" class="mb12"/>
      <template v-if="!isCommon">
        <template v-if="isRedBook">
          <div v-for="item in redBook" :key="item.keyword">
            <levelTitle :element="{name: item.name, options: {titleLevel: 2}}" class="mb12"/>
            <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
              <el-col v-for="innerItem in redBookFields" :span="rowSpan" :key="innerItem.name" class="responsive-col-lg-8">
                <el-form-item :label="innerItem.name" :prop="`${item.keyword}_${innerItem.keyword}`">
                  <div class="cost-item">
                    <div class="item-top">
                      <el-select v-model="formData.additionalKey[item.keyword][innerItem.keyword].costType" size="small" placeholder="请选择" class="width120 no-show-error" clearable @change="clearValue(item.keyword,innerItem.keyword)">
                        <el-option :value="0" label="固定价格"/>
                        <el-option :value="1" label="利润分成"/>
                      </el-select>
                      <el-input
                        v-model="formData.additionalKey[item.keyword][innerItem.keyword].value"
                        :oninput="oninputStr(formData.additionalKey[item.keyword][innerItem.keyword].costType)"
                        :placeholder="`${formData.additionalKey[item.keyword][innerItem.keyword].costType?'请输入飞博分成比例':'请输入金额'}`"
                        :disabled="inputDisable(formData.additionalKey[item.keyword][innerItem.keyword].costType)"
                        class="ml12 width170"
                        type="number"
                        size="small"
                        @change="numberInputChange(item.keyword,innerItem.keyword)"
                        @mousewheel.native.prevent
                      >
                        <span slot="suffix" class="suffix">{{ formData.additionalKey[item.keyword][innerItem.keyword].costType ? '%':'元' }}</span>
                      </el-input>
                    </div>
                    <el-input
                      v-model="formData.additionalKey[item.keyword][innerItem.keyword].remark"
                      :disabled="inputDisable(formData.additionalKey[item.keyword][innerItem.keyword].costType)"
                      class="width300 no-show-error"
                      placeholder="备注说明"
                      maxlength="50"
                      size="small"
                    />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </template>
        <template v-else>
          <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
            <el-col v-for="item in getConfig()" :span="rowSpan" :key="item.keyword" :class="{'label-collapse-global':isDouYin}" class="responsive-col-lg-8">
              <el-form-item :label="item.name">
                <div class="cost-item">
                  <div class="item-top">
                    <el-select v-model="formData.additionalKey.costPrice[item.keyword].costType" size="small" clearable placeholder="请选择" class="width120" @change="clearValue('costPrice',item.keyword)">
                      <el-option :value="0" label="固定价格"/>
                      <el-option :value="1" label="利润分成"/>
                    </el-select>
                    <el-input
                      v-model="formData.additionalKey.costPrice[item.keyword].value"
                      :oninput="oninputStr(formData.additionalKey.costPrice[item.keyword].costType)"
                      :placeholder="`${formData.additionalKey.costPrice[item.keyword].costType?'请输入飞博分成比例':'请输入金额'}`"
                      :disabled="inputDisable(formData.additionalKey.costPrice[item.keyword].costType)"
                      class="ml12 width170"
                      type="number"
                      size="small"
                      @change="numberInputChange('costPrice',item.keyword)"
                      @mousewheel.native.prevent
                    >
                      <span slot="suffix" class="suffix">{{ formData.additionalKey.costPrice[item.keyword].costType ? '%':'元' }}</span>
                    </el-input>
                  </div>
                  <el-input
                    v-model="formData.additionalKey.costPrice[item.keyword].remark"
                    :disabled="inputDisable(formData.additionalKey.costPrice[item.keyword].costType)"
                    class="width300"
                    placeholder="备注说明"
                    maxlength="50"
                    size="small"
                  />
                </div>
              </el-form-item>
            </el-col>
            <template v-if="isWeiBo" :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
              <el-col :span="24">
                <levelTitle :element="{name: '预估微任务成本', options: {titleLevel: 2}}" class="mb12"/>
              </el-col>
              <el-col :span="rowSpan" class="responsive-col-lg-8 form-item-mg-0">
                <el-form-item label="非原创直发">
                  <div class="item-top">
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.publish.value"
                      oninput="if (value > 999999999)value = 999999999; if (value < 0)value = 0"
                      placeholder="请输入金额"
                      class="width120"
                      type="number"
                      size="small"
                      @change="numberInputChange('microTaskCost','publish')"
                      @mousewheel.native.prevent
                    >
                      <span slot="suffix" class="suffix">元</span>
                    </el-input>
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.publish.remark"
                      class="width170 ml12"
                      size="small"
                      placeholder="备注说明"
                      maxlength="50"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="rowSpan" class="responsive-col-lg-8 form-item-mg-0">
                <el-form-item label="非原创转发">
                  <div class="item-top">
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.forward.value"
                      oninput="if (value > 999999999)value = 999999999; if (value < 0)value = 0"
                      placeholder="请输入金额"
                      class="width120"
                      type="number"
                      size="small"
                      @change="numberInputChange('microTaskCost','forward')"
                      @mousewheel.native.prevent
                    >
                      <span slot="suffix" class="suffix">元</span>
                    </el-input>
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.forward.remark"
                      class="width170 ml12"
                      size="small"
                      placeholder="备注说明"
                      maxlength="50"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="rowSpan" class="responsive-col-lg-8 form-item-mg-0">
                <el-form-item label="原创图文">
                  <div class="item-top">
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.originalContent.value"
                      oninput="if (value > 999999999)value = 999999999; if (value < 0)value = 0"
                      placeholder="请输入金额"
                      class="width120"
                      type="number"
                      size="small"
                      @change="numberInputChange('microTaskCost','originalContent')"
                      @mousewheel.native.prevent
                    >
                      <span slot="suffix" class="suffix">元</span>
                    </el-input>
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.originalContent.remark"
                      class="width170 ml12"
                      size="small"
                      placeholder="备注说明"
                      maxlength="50"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="rowSpan" class="responsive-col-lg-8 form-item-mg-0">
                <el-form-item label="原创视频">
                  <div class="item-top">
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.originalVideo.value"
                      oninput="if (value > 999999999)value = 999999999; if (value < 0)value = 0"
                      placeholder="请输入金额"
                      class="width120"
                      type="number"
                      size="small"
                      @change="numberInputChange('microTaskCost','originalVideo')"
                      @mousewheel.native.prevent
                    >
                      <span slot="suffix" class="suffix">元</span>
                    </el-input>
                    <el-input
                      v-model="formData.additionalKey.microTaskCost.originalVideo.remark"
                      class="width170 ml12"
                      size="small"
                      placeholder="备注说明"
                      maxlength="50"
                    />
                  </div>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </template>
      </template>
      <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
        <!-- 动态字段 -->
        <el-col v-for="(item) in formData.costInfoKey.dynamicKey" :key="`${item.name}_${item.id}`" :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item :prop="`${item.name}_${item.id}`" class="dynamicKey-label">
            <el-tooltip slot="label" :content="item.name" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ item.name }}
              </div>
            </el-tooltip>
            <dynamicKey :item="item"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import mixins from './mixins';
export default {
  components: {
    SelectWithUserLoad
  },
  mixins: [mixins],
  model: {
    prop: 'modelData',
    event: 'changeValue'
  },
  props: {
    modelData: {
      type: Object,
      default: () => ({})
    },
    rowSpan: {
      type: Number,
      default: 12
    }
  },
  data() {
    return {
      redBook: [
        { name: '本月报备', keyword: 'monthReportPriceCost' },
        { name: '本月非报备', keyword: 'monthNotReportPriceCost' },
        { name: '次月报备', keyword: 'nextMonthReportPriceCost' },
        { name: '次月非报备', keyword: 'nextMonthNotReportPriceCost', required: true }
      ],
      redBookFields: [
        { name: '图文', keyword: 'imageTextPrice' },
        { name: '视频', keyword: 'videoPrice' }
      ],
      douYin: [
        { name: '星图报价1-20s', keyword: 'starMapTwenty' },
        { name: '星图报价20-60s', keyword: 'starMapSixty' },
        { name: '星图报价60s以上', keyword: 'starMapAboveSixty' },
        { name: '内容合集单坑位报价', keyword: 'contentCollectionPrice' }
      ],
      weiBo: [
        { name: '非原创直发', keyword: 'publish' },
        { name: '非原创转发', keyword: 'forward' },
        { name: '原创图文', keyword: 'originalContent' },
        { name: '原创视频', keyword: 'originalVideo' }
      ],
      BILI: [
        { name: '定制视频', keyword: 'customVideo' },
        { name: '植入视频', keyword: 'implantationVideo' },
        { name: '直发动态', keyword: 'publishTrends' },
        { name: '转发动态', keyword: 'forwardTrends' }
      ]
    };
  },
  computed: {
    costRules() {
      const validateType = (msg, item) => {
        return (rule, value, callback) => {
          if (item || item === 0) {
            callback();
          } else {
            callback(new Error(msg));
          }
        };
      };
      const rules = {
        pointHighestRatio: [{ required: true, trigger: 'blur', validator: validateType('请输入返点比例', this.formData.additionalKey.pointHighestRatio) }]
      };
      if (this.isRedBook) {
        this.redBook.filter(i => i.required).forEach(j => {
          this.redBookFields.forEach(k => {
            rules[`${j.keyword}_${k.keyword}`] = [{ required: true, trigger: 'blur', validator: validateType(`请输入${k.name}`, this.formData.additionalKey[j.keyword][k.keyword].value) }];
          });
        });
      }
      return this.isJournalPlatform ? { ...rules, ...this.formRules } : this.formRules;
    }
  },
  methods: {
    getConfig() {
      const platformTypeName = this.modelData.platformTypeName;
      switch (platformTypeName) {
        case '抖音': return this.douYin;
        case '微博': return this.weiBo;
        case 'B站': return this.BILI;
        default:return this.redBook;
      }
    },
    numberInputChange(parentKey, key) {
      if (this.formData.additionalKey[parentKey][key].value) this.formData.additionalKey[parentKey][key].value = Number(this.formData.additionalKey[parentKey][key].value).toFixed(2);
    },
    RatioInputChange(key) {
      if (this.formData.additionalKey[key]) this.formData.additionalKey[key] = Number(this.formData.additionalKey[key]).toFixed(2);
    },
    oninputStr(costType) {
      return costType ? 'if(value>100)value=100;if(value<0)value=0;' : 'if (value > 999999999)value = 999999999; if (value < 0)value = 0';
    },
    inputDisable(costType) {
      return ![0, 1].includes(costType);
    },
    clearValue(parentKey, key) {
      if (this.formData.additionalKey[parentKey]) {
        this.$set(this.formData.additionalKey[parentKey][key], 'value', null);
      }
      if (this.inputDisable(this.formData.additionalKey[parentKey][key].costType)) {
        this.$set(this.formData.additionalKey[parentKey][key], 'remark', '');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  ::v-deep {
    .is-error {
      .no-show-error {
        .el-input__inner {
          border-color: #DCDFE6 !important;
        }
      }
    }
  }
  .cost-item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    .width300 {
      width: 300px !important;
      ::v-deep {
        .el-input, .el-select, .el-input__inner {
          width: 300px !important;
        }
      }
    }
  }
  .width240 {
    width: 240px;
  }
  .item-top {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .width120 {
      width: 120px !important;
      ::v-deep {
        .el-input, .el-select, .el-input__inner {
          width: 120px !important;
        }
      }
    }
    .width170 {
      width: 170px !important;
      ::v-deep {
        .el-input, .el-select, .el-input__inner {
          width: 170px !important;
        }
      }
    }
  }
  .form-item-mg-0 {
    .item-top {
      margin-bottom: 0;
    }
  }
  .weibo-cost-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
</style>
